<template>
	<view class="container">
		<div class="card">
            <div class="header">
                <div class="order-name">{{orderName}}</div>
                <div v-if="!hasComment" class="submit" @click="submit">提交</div>
            </div>
            <div class="title">您对本次服务满意吗？</div>
            <div class="content">
                <u-input :disabled="hasComment" :custom-style="{'background-color': '#F6F6F6', 'padding': '15rpx', 'border-radius': '8rpx'}" height="300" v-model="content" type="textarea" placeholder="从多个角度评价本次服务，帮助更多人了解"/>
            </div>
            <div class="comment">
                <div class="label">总体</div>
                <div class="stars">
                    <div class="star" :class="{'active': index < star}" v-for="index in 5" :key="index" @click="changeStar(index)"></div>
                </div>
                <div class="value">{{comment[star-1]}}</div>
            </div>
        </div>
        
        <u-toast ref="uToast" />
	</view>
</template>

<script>
    import Vue from 'vue';
	import { 
		addCommentAPI,
        getCommentListAPI
	} from '../../api/comment'

    const app = getApp()
	export default Vue.extend({
		data() {
			return {
                orderFlow: '', // 订单流水号
                orderName: '', // 订单业务名称
                star: 5, // 1-5 评价星级
                comment: [
                    '非常不满意',
                    '不满意',
                    '一般',
                    '满意',
                    '非常满意',
                ],
                content: '',
                hasComment: false
			}
		},
		onLoad(option) {
            this.orderFlow = option.orderFlow
            this.orderName = option.orderName
            this.hasComment = option.hasComment
            if(this.hasComment){
                getCommentListAPI({
                    sessionId: app.globalData.sessionId,
                    orderFlow: this.orderFlow
                }).then(res => {
                    console.log(res)
                    let data = res.listComments[0]
                    if(data){
                        this.content = data.productCommentContent
                        this.star = data.productCommentStar
                    }
                }).catch(err => {
                    this.$refs.uToast.show({
				        title: err,
				        type: 'error',
                    })
                })
            }
		},
		methods: {
            changeStar(index){
                if(!this.hasComment){
                    this.star = index + 1
                }
            },
            submit(){
                addCommentAPI({
                    sessionId: app.globalData.sessionId,
                    productCommentStar: this.star,
                    productCommentContent: this.content,
                    productCommentFlow: this.orderFlow
                }).then(res => {
                    this.$refs.uToast.show({
				        title: '评论成功',
				        type: 'success',
                        callback: () => {
                            this.$u.route({type: 'navigateBack'})
                        }
                    })
                }).catch(err => {
                    this.$refs.uToast.show({
				        title: err,
				        type: 'error',
                    })
                })
            }
		} 
	});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    min-height: 100vh;
    background-color: #efefef;
    padding: 20rpx;
    box-sizing: border-box;
    .card{
        height: 60vh;
        border-radius: 15rpx;
        background-color: #fff;
        padding: 30rpx;
        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;
            .order-name{
                flex: auto;
                font-size: 32rpx;
                overflow: hidden;
                white-space: no-wrap;
                text-overflow: ellipsis;
            }
            .submit{
                flex: none;
                color: #fff;
                margin-left: 20rpx;
                background-color: $theme-color;
                padding: 10rpx 25rpx;
                border-radius: 10rpx;
            }
        }
        .title{
            margin-bottom: 20rpx;
            font-size: 32rpx;
        }
        .content{
            margin-bottom: 40rpx;
        }
        .comment{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .label{
                font-size: 32rpx;
                flex: none;
            }
            .stars{
                flex: auto;
                display: flex;
                justify-content: space-between;
                margin: 0 30rpx;
                .star{
                    width: 50rpx;
                    height: 50rpx;
                    background-image: url('https://bizser.njtrh.com:9954/images/biztd/20211209/20211209010503109.jpg');
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    transition-duration: 0.2s;
                    &.active{
                        background-image: url('https://bizser.njtrh.com:9954/images/biztd/20211209/20211209010558752.jpg');
                    }
                }
            }
            .value{
                flex: none;
                font-size: 32rpx;
                width: 180rpx;
                text-align: center;
            }
        }
    }
}
</style>
